<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择地区</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body class="login_body">

<div class="close_login message_header">
    <a href="#">
        <img src="images/返回.png">
    </a>
    <span class="close_top_title">选择地区</span>
    <div class="clearfix"></div>
</div>


<div class="message_content">
    <div class="select_all_container select_city_container">
        <ul>
            <li class="select_brand_title" id="select_city_local">当前定位城市</li>
            <li class="select_brand_info select_brand_info_notype select_city_li city_last">
                <span>获取当前位置失败</span>
            </li>

            <li class="select_brand_title" id="select_city_all">*</li>
            <li class="select_brand_info select_brand_info_notype select_city_li city_last active">
                <span>全国</span>
            </li>

            <li class="select_brand_title" id="select_city_a">A</li>
            <li class="select_brand_info select_brand_info_notype select_city_li city_last">
                <span>安徽</span>
            </li>

            <li class="select_brand_title" id="select_city_b">B</li>
            <li class="select_brand_info select_brand_info_notype select_city_li city_last">
                <span>北京</span>
            </li>

            <li class="select_brand_title" id="select_city_c">C</li>
            <li class="select_brand_info select_brand_info_notype select_city_li city_last">
                <span>重庆</span>
            </li>

            <li class="select_brand_title" id="select_city_f">F</li>
            <li class="select_brand_info select_brand_info_notype select_city_li city_last">
                <span>福建</span>
            </li>

            <li class="select_brand_title" id="select_city_g">G</li>
            <li class="select_brand_info select_brand_info_notype select_city_li">
                <span>广东</span>
            </li>
            <li class="select_brand_info select_brand_info_notype select_city_li">
                <span>广西</span>
            </li>
            <li class="select_brand_info select_brand_info_notype select_city_li">
                <span>甘肃</span>
            </li>
            <li class="select_brand_info select_brand_info_notype select_city_li city_last">
                <span>贵州</span>
            </li>

            <li class="select_brand_title" id="select_city_h">H</li>
            <li class="select_brand_info select_brand_info_notype select_city_li">
                <span>海南</span>
            </li>
            <li class="select_brand_info select_brand_info_notype select_city_li">
                <span>河北</span>
            </li>
            <li class="select_brand_info select_brand_info_notype select_city_li">
                <span>河南</span>
            </li>
            <li class="select_brand_info select_brand_info_notype select_city_li">
                <span>黑龙江</span>
            </li>
            <li class="select_brand_info select_brand_info_notype select_city_li">
                <span>湖北</span>
            </li>
            <li class="select_brand_info select_brand_info_notype select_city_li city_last">
                <span>湖南</span>
            </li>


        </ul>
    </div>

    <div class="select_city_detail_side">
        <ul>
            <li class="city_title">全部</li>
            <li class="city_area">不限城市</li>
            <li class="city_title">安徽</li>
            <li class="city_area">合肥</li>
            <li class="city_area">合肥</li>
            <li class="city_area">合肥</li>
            <li class="city_area">合肥</li>
            <li class="city_area">合肥</li>
            <li class="city_area">合肥</li>
            <li class="city_area">合肥</li>
            <li class="city_area">合肥</li>
            <li class="city_area">合肥</li>
            <li class="city_area">合肥</li>
            <li class="city_area">合肥</li>
            <li class="city_area">合肥</li>
            <li class="city_area">合肥</li>
            <li class="city_area">合肥</li>
            <li class="city_area">合肥</li>
            <li class="city_area">合肥</li>
            <li class="city_area">合肥</li>
            <li class="city_area">合肥</li>
            <li class="city_area">合肥</li>
            <li class="city_area">合肥</li>
            <li class="city_area">合肥</li>
            <li class="city_area">合肥</li>
            <li class="city_area">合肥</li>
            <li class="city_area">合肥</li>
            <li class="city_area">合肥</li>
            <li class="city_area">合肥</li>
            <li class="city_area">合肥</li>
            <li class="city_area">合肥</li>
        </ul>
    </div>
</div>

<div class="select_side">
    <ul>
        <li><a href="#select_city_local">当</a></li>
        <li><a href="#select_city_all">*</a></li>
        <li><a href="#select_city_a">A</a></li>
        <li><a href="#select_city_b">B</a></li>
        <li><a href="#select_city_c">C</a></li>
        <li><a href="#select_city_f">F</a></li>
        <li><a href="#select_city_g">G</a></li>
        <li><a href="#select_city_h">H</a></li>
        <li><a href="#select_city_j">J</a></li>
        <li><a href="#select_city_l">L</a></li>
        <li><a href="#select_city_n">N</a></li>
        <li><a href="#select_city_s">S</a></li>
        <li><a href="#select_city_t">T</a></li>
        <li><a href="#select_city_y">Y</a></li>
        <li><a href="#select_city_z">Z</a></li>
    </ul>
</div>




</body>
<script src="js/mui.min.js"></script>
<script src="js/jquery.2.1.1min.js"></script>
<script src="js/swiper.jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".select_city_li").click(function (e) {
            $(this).addClass("active");
            $(this).siblings().removeClass("active");
            $(".select_city_detail_side").addClass("side_width");
            e.stopPropagation();
        });
        $(document).click(function () {
            $(".select_city_detail_side").removeClass("side_width");
        });
        $(document).scroll(function () {
            $(".select_city_detail_side").removeClass("side_width");
        });
        $(".select_city_detail_side").click(function (e) {
            e.stopPropagation();
        });
//        $(".select_city_detail_side").scroll(function (e) {
//            e.stopPropagation();
//        });
    })
</script>

</html>